<template>
    <div>
        <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
            <el-descriptions
                    title="用户管理"
                    :column="3"
                    border
            >
                <el-descriptions-item>
                    <template slot="label"> 机构名称</template>
                    <el-form-item label="登录账号" prop="user_name">
                        <el-input v-model="form.user_name" placeholder="请输入登录账号" size="small" clearable/>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 登录密码</template>
                    <el-form-item label="登录密码" prop="password">
                        <el-input type="password" show-password v-model="form.password" placeholder="请输入密码" clearable/>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 机构类型</template>
                    <el-form-item prop="supervise">
                        <el-select
                                placeholder="请选择机构类型"
                                v-model="form.supervise"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in superviseList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 组织机构代码</template>
                    <el-form-item prop="institution_code">
                        <el-input v-model="form.institution_code" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 机构等级</template>
                    <el-form-item prop="institution_level">
                        <el-select
                                placeholder="请选择机构等级"
                                v-model="form.institution_level"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in institutionLevelList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 医院等级</template>
                    <el-form-item prop="hospital_level">
                        <el-select
                                placeholder="请选择医院等级"
                                v-model="form.hospital_level"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in hospitalLevelList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 负责人姓名</template>
                    <el-form-item prop="name">
                        <el-input v-model="form.name" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 负责人性别</template>
                    <el-form-item prop="sex">
                        <el-select
                                placeholder="请选择负责人性别"
                                v-model="form.sex"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in sexList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.name"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 负责人手机号</template>
                    <el-form-item prop="phone">
                        <el-input v-model="form.phone" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 负责人邮箱</template>
                    <el-form-item prop="email">
                        <el-input v-model="form.email" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 邮政编码</template>
                    <el-form-item prop="zipcode">
                        <el-input v-model="form.zipcode" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 筛查年度</template>
                    <el-form-item prop="years">
                        <el-select
                                placeholder="请选择筛查年度"
                                v-model="form.years"
                                multiple
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in taskList"
                                    :key="item.id"
                                    :label="item.year_time"
                                    :value="item.year_time"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">省份</template>
                    <el-form-item prop="province_id">
                        <el-select
                                v-model="form.province_id"
                                placeholder="请选择省份"
                                @change="getCityList()"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in provinceList"
                                    :key="item.id"
                                    :label="item.district"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 城市</template>
                    <el-form-item prop="city_id">
                        <el-select
                                placeholder="请选择城市"
                                v-model="form.city_id"
                                @change="getCountyList()"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in cityList"
                                    :key="item.id"
                                    :label="item.district"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 区/县</template>
                    <el-form-item prop="district_id">
                        <el-select
                                v-model="form.district_id"
                                placeholder="请选择区/县"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in countyList"
                                    :key="item.id"
                                    :label="item.district"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 详细地址</template>
                    <el-form-item prop="address">
                        <el-input v-model="form.address" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>

            <el-descriptions :column="1" border>
                <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 87%">
                    <el-form-item label=" ">
                        <el-button @click="handleDialogVisible(false)" size="small"
                        >取 消
                        </el-button
                        >
                        <el-button
                                type="primary"
                                @click="!form.id ? create() : update()"
                                size="small"
                        >确 定
                        </el-button>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>

            <el-row>

                <el-col :span="12">
                    <el-form-item label="账号妮称" prop="password">
                        <el-input v-model="form.nick_name" placeholder="请输入账号密码" size="small"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属角色" prop="role">
                        <el-select v-model="form.role" multiple placeholder="请选择" size="small" style="width:100%">
                            <el-option v-for="item in roleslist" :key="item.role_name" :label="item.role_name"
                                       :value="item.role_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="是否启用" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入联系电话" size="small" clearable/>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="用户头像">
                        <div class="uploadcol" style="width: 100px;">
                            <div class="uploadborder" @click="openUpload()" style="width: 100px;height: 100px;">
                                <el-image style="width: 100px; height: 100px" :src="form.face" fit="contain"
                                          v-if="form.face"></el-image>

                                <i class=" fa fa-image" v-if="!form.face"></i>
                            </div>
                        </div>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="显示排序" prop="order_by">
                        <el-input-number v-model="form.order_by" controls-position="right" :min="0" :value="100"
                                         size="small"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <select-files :show="uploadImage" @update="closeUpload" :selectType="1"
                      @selectSure="selectImage"></select-files>
    </div>
</template>

<script>
    import {createMember, updateMember} from '@/api/member/member';
    import SelectFiles from '@/components/select-files'

    export default {
        props: ['rowData', 'dialogStatus'],
        components: {
            SelectFiles
        },
        data() {
            return {
                categoryData: [],
                form: {
                    "id": '',
                    "username": "",
                    "password": "",
                    "name": "",
                    "phone": "",
                    "sex": "",
                    "age": "",
                    "school": "",
                    "college": "",
                    "department": "",
                    "education": "",
                    "avatar": "",
                    "state": 1
                },
                rules: {
                    username: [{
                        required: true,
                        message: "用户名不能为空",
                        trigger: "blur"
                    }],
                    password: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    }]
                },
                createLoading: false,
                updateLoading: false,
                uploadImage: false,
            }
        },
        created() {
            if (this.dialogStatus == 'update') {
                this.form = {...this.rowData}
            }
        },
        methods: {
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false
                this.$emit('childByDialogVisible', this.dialogVisible, isUpdate)
            },
            //创建
            create() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        this.createLoading = true
                        createStudent(this.form).then(response => {
                            this.createLoading = false
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true)
                            }
                        })
                    }
                })
            },
            //修改
            update() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        this.updateLoading = true
                        updateStudent(this.form).then(response => {
                            this.updateLoading = false
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true)
                            }
                        })
                    }
                })
            },
            openUpload() {
                this.uploadImage = true;
            },
            closeUpload() {
                this.uploadImage = false;
            },
            selectImage(res) {
                this.form.avatar = res[0].urls;
            },
        }
    }
</script>
